<template>
    <div class="video-item-view">
        <i class="play" :class="[isPlay ? 'toggle' : '']" @click="togglePlay"></i>
        <i class="back" @click="back"></i>
        <video-player ref="play" class="video" :options="videoOption" :isPlay="isPlay"
            :togglePlay="togglePlay"></video-player>
        <van-slider v-model="value" :button-size="5" active-color="#5f5f5f" inactive-color="#000" @change="onChange" />
        <div class="user">
            <div class="user-top">
                <div class="user-img">
                    <img :src="data.blogInfo.bigAvaImg">
                </div>
                <div class="user-name">
                    {{ data.blogInfo.blogNickName }}
                </div>
            </div>
            <div class="title">
                <div v-html="data.postData.postView.digest"></div>
            </div>
            <div class="tag">
                <span v-for=" (item, i) in data.postData.postView.tagList" :key="i">#{{ item }}</span>
            </div>
        </div>
        <div class="side-bar">
            <div class="my-like">
                <i :class="[likeaAtive ? 'like-active' : '']" @click="likeaAtive = !likeaAtive"></i>
                <div>
                    {{ numberFormatData(data.postData.postCount.favoriteCount) }}
                </div>
            </div>
            <div class="my-thumb">
                <i :class="[thumbAtive ? 'thumb-active' : '']" @click="thumbAtive = !thumbAtive"></i>
                <div>
                    {{ numberFormatData(data.postData.postCount.hotCount) }}
                </div>
            </div>
            <div class="my-comment" @click="showPopup">
                <i></i>
                <div>
                    {{ numberFormatData(data.postData.postCount.responseCount) }}
                </div>
            </div>
            <div class="my-share" @click="showShare = true">
                <i></i>
                <div>分享</div>
            </div>
        </div>

        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

        <van-popup v-model:show="showP" round position="bottom">
            <div class="all-comments">
                <div class="hot-reviews" v-show="hottList!.length">
                    <h2>热门评论</h2>
                    <ul>
                        <li v-for="h in hottList" :key="h.id">
                            <div class="user-img" v-if="h.publisherBlogInfo">
                                <img :src="h.publisherBlogInfo.bigAvaImg" />
                            </div>
                            <div class="text">
                                <div class="user-name">{{ h.publisherBlogInfo.blogNickName }}</div>
                                <div class="content">{{ h.content }}</div>
                                <div class="time">{{ funtime(h.publishTime) }} · {{ h.ipLocation }}</div>
                            </div>
                            <i></i>
                        </li>
                    </ul>
                </div>

                <div class="reviews" v-show="list!.length">
                    <h2>最新评论</h2>
                    <ul>
                        <li v-for="l in list" :key="l.id">
                            <div class="user-img" v-if="l.publisherBlogInfo">
                                <img :src="l.publisherBlogInfo.bigAvaImg" />
                            </div>
                            <div class="text">
                                <div class="user-name">{{ l.publisherBlogInfo.blogNickName }}</div>
                                <div class="content">{{ l.content }}</div>
                                <div class="time">{{ funtime(l.publishTime) }} · {{ l.ipLocation }}</div>
                            </div>
                            <i></i>
                        </li>
                    </ul>
                </div>

                <div class="make-comment">
                    <form action="/">
                        <van-search v-model="sendValue" shape="round" placeholder="评论支持太太" :left-icon="icon"
                            @click="showPopup" />
                    </form>

                    <div class="send" @click="" :class="[sendValue ? 'send-data' : '']">发送</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import icon from "@/assets/images/home/search.png"
import { funtime_date, numberFormat } from "@/utils/numberFormat";
import { reactive, ref, onMounted, onUnmounted } from "vue";
import VideoPlayer from '@/components/HomeComponents/VideoPlayer/VideoPlayer.vue'
import { Api } from "@/utils/apis";

const route = useRoute()
const router = useRouter()

const value = ref(0);
let isPlay = ref(false)
let play = ref<any>(null)
let timer = ref<any>(null)

let data = ref<any>({})
let likeaAtive = ref(false)
let thumbAtive = ref(false)


let list = ref<any>()
let hottList = ref<any>()
let showP = ref(false)

const sendValue = ref("");
const showShare = ref(false);
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
];

const props = defineProps({
    src: {
        type: String,
        default: ""
    },
    data: {
        type: Object,
        // default: ""
    }
})

let videoOption = reactive({
    autoplay: false,
    controls: false,
    loop: true,
    sources: [
        {
            src: ''
        }
    ]
})

videoOption.sources[0].src = props.src

data.value = props.data


//获取comments 全部评论数据
const getHomeAllComments = async () => {
    let data_ = await Api.getHomeAllComments({
        postId: data.value.itemId,
        blogId: data.value.postData?.postView?.blogId
    })
    // console.log(data_);
    list.value = data_?.data?.list;
    hottList.value = data_?.data?.hotList;
}

const togglePlay = () => {
    isPlay.value = !isPlay.value
    if (isPlay.value) {
        play.value.play()

        timer.value = setInterval(() => {

            value.value = play.value?.value

        }, 800)

    } else {
        play.value.pause()
    }
}


const onChange = (value: number) => {
    play.value.restart(value)
}


const back = () => {
    router.back();
}

const numberFormatData = (time: number) => {
    return numberFormat(time);
}

const onSelect = (option: any) => {
    showToast(option.name);
    showShare.value = false;
};

const showPopup = () => {
    showP.value = true;
}

const funtime = (time: number) => {
    return funtime_date(time);
}

onMounted(() => {
    getHomeAllComments()
})

onUnmounted(() => {
    clearInterval(timer.value)
})
</script>

<style scoped lang="scss">
.video-item-view {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    z-index: 100;
    background-color: rgb(255, 255, 255);
    position: relative;

    .video {
        width: 100vw;
        height: 100vh;
    }

    .back {
        width: 25px;
        height: 25px;
        margin: 10px;
        display: block;
        background-image: url("@/assets/images/home/icon_back.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 99px;
        z-index: 10;
    }

    .play {
        width: 100px;
        height: 100px;
        display: block;
        background-image: url("@/assets/images/home/_0o.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 50;
    }

    .toggle {
        background-image: url("");
    }

    ::v-deep(.van-slider) {
        position: absolute;
        bottom: 10px;
    }

    .user {
        width: 100vw;
        height: 120px;
        position: absolute;
        bottom: 26px;
        font-size: 16px;
        background: rgba(0, 0, 0, 0.5);

        img {
            width: 50px;
            height: 50px;
            border-radius: 999px;
        }

        .user-top {
            display: flex;
            align-items: center;

            .user-img {
                width: 55px;
                height: 55px;
                border-radius: 999px;
                background-color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .user-name {
                width: 100px;
                font-size: 20px;
                font-weight: 700;
            }
        }

        .title {
            height: 20px;
            margin: 5px;
            overflow: hidden;

            div {
                text-align: start;

                :deep(p) {
                    text-align: start;
                    margin: 0;
                    padding: 0;
                }
            }
        }

        .tag {
            display: flex;
            // flex-flow: row wrap;
            width: 100%;
            overflow-x: scroll;
            white-space: nowrap;

            span {
                font-size: 12px;
                color: #c7c7c7;
                padding: 2px 4px;
                margin: 5px;
                border-radius: 15px;
                background-color: rgba(0, 0, 0, 0.5);
            }
        }
    }

    .side-bar {
        width: 70px;
        height: 55vh;
        position: absolute;
        right: 0;
        top: 30%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        font-size: 16px;

        // background-color: #ff0000;

        i {
            width: 40px;
            height: 40px;
            margin: 5px;
            display: block;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
        }

        .my-like {
            display: flex;
            flex-direction: column;

            i {
                background-image: url("@/assets/images/home/喜爱.png");
            }

            .like-active {
                background-image: url("@/assets/images/home/喜爱 (1).png");
            }
        }

        .my-thumb {
            display: flex;
            flex-direction: column;

            i {
                background-image: url("@/assets/images/home/点赞.png");

            }

            .thumb-active {
                background-image: url("@/assets/images/home/点赞 (1).png");
            }
        }

        .my-comment {
            display: flex;
            flex-direction: column;

            i {
                background-image: url("@/assets/images/home/评论.png");

            }
        }

        .my-share {
            display: flex;
            flex-direction: column;

            i {
                background-image: url("@/assets/images/home/分享.png");

            }
        }
    }

    ::v-deep(.van-share-sheet) {
        position: absolute;
        bottom: 0;
        color: #000000;
    }

    ::v-deep(.van-popup) {
        position: absolute;
        bottom: 0;
        color: #000000;

        .all-comments {
            max-height: 80vh;
            font-size: 16px;
            text-align: start;
            position: relative;

            .show,
            .hot-reviews,
            .reviews {
                h2 {
                    margin: 20px 10px;
                    font-weight: 700;
                }

                ul {
                    li {
                        width: 94vw;
                        margin: 10px auto;
                        display: flex;
                        justify-content: space-between;

                        .user-img {
                            width: 10vw;

                            img {
                                width: 30px;
                                height: 30px;
                                margin-top: 10px;
                                border-radius: 999px;
                            }
                        }

                        .text {
                            width: 80vw;

                            .user-name {
                                color: #949494;
                                font-size: 12px;
                            }

                            .content {
                                margin: 5px 0;
                                font-size: 12px;
                                line-height: 16px;
                            }

                            .time {
                                color: #d4d4d4;
                                font-size: 12px;
                            }
                        }

                        i {
                            width: 20px;
                            height: 20px;
                            margin-top: 10px;
                            background-image: url("@/assets/images/home/2qP.png");
                            display: inline-block;
                            background-repeat: no-repeat;
                            background-position: center center;
                            background-size: contain;
                        }
                    }
                }
            }

            .make-comment {
                position: sticky;
                bottom: 0;
                left: 0;
                z-index: 10000;
                width: 100vw;
                margin: 0 auto;
                height: 44px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: rgb(255, 255, 255);

                .van-search {
                    width: 85vw;

                    .van-cell {
                        flex-direction: row;
                    }
                }

                .send {
                    color: #d4d4d4;
                    font-size: 14px;
                    margin-right: 10px;
                }

                .send-data {
                    color: #49d2cc;
                }
            }
        }
    }
}
</style>